<template>
    <my-form v-model="form" @submit="submit" @cancle="cancle" ref="form">
        <el-row>
			<el-col :span="12">
                <el-form-item label="用户名称" prop="truename" :rules="newRule('用户名称', 'required')">
                    <el-input v-model="form.truename"></el-input>
                </el-form-item>
			</el-col>
			<el-col :span="12">
                <el-form-item label="登录名" prop="loginname" :rules="newRule('登录名', 'required')">
                    <el-input v-model="form.loginname" :disabled="!pswShow"></el-input>
                </el-form-item>
			</el-col>
		</el-row>
		<el-row>
            <el-col :span="12">
                <el-form-item label="手机号" prop="mobile" :rules="newRule('手机号', 'required', 'mobile')">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12" v-if="pswShow">
                <el-form-item label="默认密码" prop="pwd">
                    <el-input v-model="form.pwd" disabled></el-input>
                </el-form-item>
            </el-col>
		</el-row>
		<el-row>
			<el-col :span="14">
                <el-form-item label="所属部门" prop="deptcode" :rules="newRule('所属部门', 'required')">
                    <dept-selector v-model="form.deptcode" placeholder="请分配部门" @change="deptChangeHandler"></dept-selector>
                </el-form-item>
            </el-col>
			<el-col :span="10" v-show="false">
				<el-form-item label="是管理员" prop="isadmin">
					<el-switch v-model="form.isadmin" active-text="是" inactive-text="否" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
			</el-col>
		</el-row>
    </my-form>
</template>

<script>
import deptSelector from '../dept/component/dept-selector.vue'

export default {
    components: {deptSelector},
    props: {
        userid: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            form:{
				pwd: 'abc123',
				userid: '',
                loginname: ''
			},
			pswShow: true
        }
    },
    computed: {

    },
	methods:{
		queryData: function(){
			var that = this;
			this.$get(this.$store.getters.sysUrl + '/user/detail', {rowguid: this.form.userid}, function(data){
				that.form = data;
				if(!!data.userid){
					this.pswShow = false;
				}
			})
		},
		submit: function(){
			var that = this;
			this.$post(this.$store.getters.sysUrl + '/user/add', this.form, function(data, res){
				ShowMsg.call(this, res.msg, 'success');
				this.cancle();
			})
		},
		cancle: function(){
            enpty_obj(this.form, ['pwd'])
			this.$emit('close');
		},
		deptChangeHandler: function(e){
			this.form.deptcode = e.deptcode;
			this.form.deptname = e.deptname;
		},

        reload() {
            this.form.userid = this.userid;
            !!this.form.userid && this.queryData();
        }
	},
	mounted:function(){
		this.reload();
		console.log(this.userid);
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
